<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/students/notices'}">学生</el-breadcrumb-item>
      <el-breadcrumb-item>过程文档管理</el-breadcrumb-item>
      <el-breadcrumb-item>提交毕业论文(终稿)</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域 -->
    <el-card> 
      <el-card>  
      <h1 style="margin:50px 100px"  v-if="submittedPaperOriginal">您还为提交毕业论文(初稿)，请先提交毕业论文(初稿)!</h1>
      <div v-else style="width:1000px">
        <h2 class="txt">注: 提交毕业论文(终稿)以附件的形式提交</h2>
        <h1 v-if="deadline.paperFinal" style="margin:10px 20%; color:red">毕业论文(终稿)提交截止时间: {{$moment(deadline.paperFinal).format('YYYY-MM-DD HH:mm:ss')}}</h1>
        <el-upload class="upload" drag ref="upload" 
          style="margin:5% 35%;width:400px"  :auto-upload="false" action="#" :before-upload="beforeUploadFile" :file-list="fileList"
          :on-remove="handleRemove" :http-request="handleUpload" :multiple="false" :limit="1" accept=".doc,.pdf,.docx">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传 word / pdf (后缀名为.doc,.docx,.pdf)文件,且不超过 10MB</div>
        </el-upload>
        <el-button v-if="!paperFinal.status" style="margin:10px 45%" type="primary" @click.native="submitPaperFinal">提交毕业论文(终稿)</el-button>
        <el-button v-if="paperFinal.status && paperFinal.status !== 4" style="margin:10px 45%" type="success" @click.native="updatePaperFinal">修改毕业论文(初稿)</el-button>
      </div> 
    </el-card>
    </el-card>
  </div>
</template>

<script>
  import {uploadFile} from '../../axios/upload'
  import {compareDate} from '../../js/time'
  import {userGetDeadline} from '../../axios/time'
  import {getStudentPaperOriginal} from '../../axios/paper-original'
  import {getStudentPaperFinal,studentAddPaperFinal,studentUpdatePaperFinal} from '../../axios/paper-final'
  export default {
    name: 'StudentPaperFinal',
    data(){
      return {  
        deadline:{},
        fileList: [],  // 上传的文件信息 
        submittedPaperOriginal: true, 
        paperFinal:{//  毕业论文(初稿)信息
          attachment: ''
        },
        paperOriginal:{}
      }
    },
    mounted(){  
      userGetDeadline().then(res => {
        if(res.success) this.deadline = res.data
      })
      getStudentPaperOriginal().then(res => {
        if(res.success){
          if(res.data !== null){
            this.paperOriginal = res.data 
            this.submittedPaperOriginal = false;
          } 
        }
      })
      getStudentPaperFinal().then(res => {
        if(res.success){
          if(res.data !== null){ 
            this.paperFinal = res.data 
            const file = {
              name: this.paperFinal.filename,
              url: this.paperFinal.attachment
            }
            this.fileList.push(file)
            if(this.paperFinal.status === 2){
              this.$notify.warning({
                title: '等待教师审核!', 
              });
            }
            if(this.paperFinal.status === 3){
              this.$notify.error({
                title: '审核不通过，请重新提交!',
                message: this.paperFinal.reviewAdvice, 
              });
            }
            if(this.paperFinal.status === 4){
              this.$notify.success({
                title: '审核通过!',
                message: this.paperFinal.reviewAdvice, 
              });
            }
          }
        }
      }) 
    },
    methods:{
      beforeUploadFile(file){
        const isPdf = file.type === "application/pdf"
        const isDoc = file.type === "application/msword" 
        const isDocx = file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        const isLimit10M = (file.size / 1024 / 1024 < 10)
        if(!isPdf && !isDoc && !isDocx){
          this.$message.error("上传文件类型只能是.doc,.pdf,.docx!")
          return false;
        }
        if(!isLimit10M){
          this.$message.error("上传文件大小必须在 10M 以内!")
          return false;
        }
        return true; 
      },
      handleRemove(file){
        this.$message.info('成功移除文件: ' + file.name)
        this.paperFinal.attachment = ''
        this.fileList = []
      },
      judgeTimeLegal(paperFinalLimit){
        if(paperFinalLimit !== null){
          if(!compareDate(paperFinalLimit)){
            this.$message.error('毕业论文(终稿)提交时间已截止!')
            return false;
          }
        } 
        return true
      }, 
      submitPaperFinal(){
        if(!this.judgeTimeLegal(this.deadline.paperFinal)) return
        if(this.$refs.upload.uploadFiles.length === 0){
          this.$message.error('请选择上传文件!')
          return
        }  
        this.$confirm('确认提交吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 此时才上传文件 
          if(this.$refs.upload.uploadFiles.length === 1 && this.paperFinal.attachment === ''){
            this.$refs.upload.submit()    
          }
        }).catch(() => {
          this.$message.info('已取消提交!')
        }) 
      },
      updatePaperFinal(){
        if(!this.judgeTimeLegal(this.deadline.paperFinal)) return
        if(this.$refs.upload.uploadFiles.length === 0){
          this.$message.error('请选择上传文件!')
          return
        }  
        if(this.$refs.upload.uploadFiles.length === 1 && this.paperFinal.attachment !== ''){
          this.$message.error('文件未修改!')   
          return 
        }
        this.$confirm('确认提交吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 此时才上传文件 
          if(this.$refs.upload.uploadFiles.length === 1 && this.paperFinal.attachment === ''){
            this.$refs.upload.submit()    
          }
        }).catch(() => {
          this.$message.info('已取消提交!')
        }) 
      },
      handleUpload(file){
        console.log(file.file)
        const form = new FormData();
        form.append("file", file.file);
        uploadFile(form).then(res => {
          if(res.success){
            this.paperFinal.filename = res.data.filename
            this.paperFinal.attachment = res.data.url 
            if(!this.paperFinal.status){
              this.paperFinal.subId = this.paperOriginal.subId;
              this.paperFinal.teaId = this.paperOriginal.teaId;
              this.paperFinal.stuId = this.paperOriginal.stuId;
              this.addStudentPaperFinal(); 
            }else{
              this.updateStudentPaperFinal()
            } 
          }  
        })
      },
      addStudentPaperFinal(){
        studentAddPaperFinal(this.paperFinal).then(res => {
          if(res.success){
            this.$message.success('文件上传成功!')
            this.$router.go(0); // 刷新本页面
          }
        })
      },
      updateStudentPaperFinal(){
        studentUpdatePaperFinal(this.paperFinal).then(res => {
          if(res.success){
            this.$message.success('文件上传成功!')
            this.$router.go(0); // 刷新本页面
          }
        })
      }, 
    }
  }   
</script>

<style scoped>
  .txt{
    margin:60px 20%;
  }
  .upload {
    width: 80%;
    margin: 50px 100px
  }
</style>